<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv">
                <div class="row-left">&nbsp;</div>
                <div class="row-right">
                    <el-button type="primary" @click="new_set_ware(-1,1)">创建分类</el-button>
                </div>
            </div>
            <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
                <el-table-column fixed prop="id" label="分类编号（ID）"></el-table-column>
                <el-table-column fixed label="序号" v-slot="scope">{{scope.$index+1}}</el-table-column>
                <el-table-column prop="name" label="分类名称"></el-table-column>
                <el-table-column prop="count" label="商品数"></el-table-column>
                <el-table-column fixed="right" label="操作" v-slot="scope">
                    <el-button
                            @click.native.prevent="new_set_ware(scope.$index, scope.row)"
                            type="text"
                            size="small"
                    >
                        编辑
                    </el-button>
                    <el-button
                            @click.native.prevent="new_set_ware(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            class="color-red"
                    >
                        删除
                    </el-button>
                </el-table-column>
            </el-table>
            <!--页码-->
            <el-row type="flex" class="row-bg" justify="end">
                <el-col :span="12">
                    <Page v-if="state.totalPage" :totalPage="state.totalPage" @changePage="changePage"></Page>
                </el-col>
            </el-row>
            <!-- 新建仓库 -->
            <el-dialog
                    :title="state.dialog_title"
                    v-model="state.new_dialogVisible"
                    width="40%"
                    center
            >
                <span>
          <el-form
                  :model="state.set_form"
                  :rules="state.rules"
                  ref="form"
                  label-width="100px"
                  class="demo-ruleForm"
          >
                <el-form-item label="分类名称" prop="name">
                  <el-input v-model="state.set_form.name"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="count">
                  <el-input v-model="state.set_form.count" type="number"></el-input>
                </el-form-item>
              </el-form>
        </span>
                <template #footer>
              <span class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit_create">提 交</el-button>
              </span>
                </template>
            </el-dialog>
        </el-card>

    </div>
</template>

<script>
    import {ref, reactive, getCurrentInstance, onMounted} from "vue";
    import {useRouter} from "vue-router";
    import Page from '@/components/Pagination.vue';
    import {ElNotification} from "element-plus";

    export default {
        name:"pro_type",
        components: {Page},
        props: {},
        setup() {
            let form = ref("null");
            const router = useRouter();
            const {ctx} = getCurrentInstance();
            let state = reactive({
                new_dialogVisible: false,
                totalPage: '',
                set_form: {
                    name: '',
                    count:'',
                },
                rules: {
                    name: [
                        {required: true, message: "请输入类名", trigger: "blur"},
                    ],
                },
                tableData: [
                    {
                        id:165,
                        name:'分类名称1',
                        count:'2',
                    },{
                        id:169,
                        name:'分类名称2',
                        count:'12',
                    },{
                        id:1615,
                        name:'分类名称3',
                        count:'23',
                    }
                ],
                dialog_title: '创建分类',
            });

            onMounted(() => {
                // 暂时没有接口
                // getOrderlist();
            });

            //获取列表数据
            function getOrderlist() {
                ctx.$http.get("/tanxiaji/erp/inventory/list/", {

                }).then((res) => {
                    if (res.errno == 0) {
                        var list = res.data;
                        state.tableData = list.goods_statis_list;
                    }
                }).catch((err) => {
                    ElNotification.error(err);
                });
            }

            // 关闭弹窗--并清除表单信息
            function close() {
                state.new_dialogVisible = false;
            }

            // 打开新建弹窗
            function new_set_ware(index, item) {
                state.new_dialogVisible = true;
                if (index != -1) { //编辑
                    var obj = Object.assign({}, item);
                    state.set_form = {
                        name: obj.name,
                        count: obj.count,
                    }
                    state.dialog_title = '编辑分类'
                } else { //创建
                    state.set_form = {
                        name: '',
                        count: 0,
                    }
                    state.dialog_title = '创建分类'
                }
            }

            //页码
            function changePage() {

            }

            function submit_create() {
                var obj = state.set_form;
                var data = {
                    name: obj.name,
                    count: obj.count,
                }
                form.value.validate((valid) => {
                    if (valid) {
                        console.log(valid, data)
                        close();
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            }

            // 创建仓库
            return {
                form,
                state,
                new_set_ware,
                close,
                submit_create,
                changePage,
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .el-card {
            height: 100%;
            .cart-title::before {
                content: " ";
                width: 4px;
                height: 20px;
                background: #1890ff;
                background: #1890ff;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
            }
            .rowDiv {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .row-left {
                    display: flex;
                    width: 70%;
                    justify-content: space-between;
                    .row-item {
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                    }
                }
                .row-right {
                    width: 15%;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
            .color-red {
                color: red;
            }
        }
    }

    .row-bg {
        margin-top: 10px;
    }
</style>